import React from 'react';
import './index.d.scss'
import ReactMarkdown from 'react-markdown'
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { base16AteliersulphurpoolLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
import gfm from 'remark-gfm'
import '@styles/markdown.scss'
import { detail } from './read'
import { LOAD_STATE } from '@util/state.js'

class ButtonPage extends React.PureComponent {

   constructor(props) {
      super(props)

      this.state = {
        
markjs: ``,
markText: `
<ReactMarkdownWithHtml
   allowDangerousHtml
   renderers={this.renderers}
   children={this.state.markText}
/>`
      }
   }

   componentDidMount() {
        this.props.cmpReady(LOAD_STATE.SUCCESS)
   }

   renderers = {
    code: ({ language, value }) => {
        console.log(language)
       return <SyntaxHighlighter
                  style={base16AteliersulphurpoolLight}
                  language="markdown"
                  lineNumberStyle={{ fontSize: 12 }}
                  children={value} 
              />
    }
 }

   handleClickCode = (item, index) => {
      const phone = document.getElementById('phone')
      if(phone) {
         phone.contentWindow.postMessage({index}, "*")
      }
   }

   render() {

      return (
         <div className="page_button markdown-body">
            
            <ReactMarkdown
               lineNumberStyle={{ fontSize: 20 }}
               escapeHtml={false}
               source={detail.header}
            />
            <div>
               {
                  detail.codeExample.map((item, index) => 
                     <div key={`cmp_${index}`} className="ararin_code_box">
                        <ReactMarkdown
                           lineNumberStyle={{ fontSize: 20 }}
                           escapeHtml={false}
                           source={item.title}
                        />
                        <div className="view_code" onClick={() => this.handleClickCode(item, index)}>
                           <SyntaxHighlighter
                              style={base16AteliersulphurpoolLight}
                              language="jsx" 
                              lineNumberStyle={{ fontSize: 12 }}
                              children={item.code} 
                           />
                        </div>
                     </div>
                  )
               }
            </div>
            <ReactMarkdown
               lineNumberStyle={{ fontSize: 20 }}
               plugins={[gfm]}
               escapeHtml={false}
               source={detail.pramsDetail}
            />
         </div>
      );
   }
}

export default ButtonPage;
